<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;background-color: lightblue;"></canvas>
		<script type="text/javascript">
			function du(e) {
				return e * Math.PI / 180
			}
			var canvas = document.getElementById('canvas');
			var cxt = canvas.getContext("2d");
			canvas.width = 550;
			canvas.height = 400;
			
			
			//耳朵
			cxt.beginPath();
			cxt.arc(180, 110, 40, 0 , du(360))
			cxt.fill()			
			cxt.arc(370, 110, 40, 0 , du(360))
			cxt.fill()
			cxt.closePath();
			
			//脸
			cxt.beginPath()
			cxt.arc(canvas.width/2, canvas.height/2, 130, 0, du(360));
			cxt.closePath();
			cxt.fillStyle = 'white';
			cxt.fill();
			
			//ω笑
			cxt.beginPath();
			cxt.arc(255, 280, 20 , 0, du(180))
			cxt.lineWidth = 8;
			cxt.stroke()
			cxt.closePath();
			cxt.beginPath();
			cxt.arc(295, 280, 20 , 0, du(180))
			cxt.lineWidth = 8;
			cxt.stroke()
			cxt.closePath();
//			cxt.beginPath();
//			cxt.arc(275, 280, 4 , 0, du(180),true)
//			cxt.fillStyle = 'black';
//			cxt.fill()
//			cxt.closePath();
			
			//眼圈
			cxt.beginPath();
			cxt.arc(230, 190, 30, 0 , du(360))
			cxt.fillStyle = 'black';
			cxt.fill();
			cxt.arc(320, 190, 30, 0 , du(360))
			cxt.fill()
			cxt.closePath();
			
			//眼白
			cxt.beginPath();
			cxt.arc(232, 195, 18, 0 , du(360))
			cxt.fillStyle = 'white';
			cxt.fill();
			cxt.arc(318, 195, 18, 0 , du(360))
			cxt.fill()
			cxt.closePath();
			
			//眼珠
			cxt.beginPath();
			cxt.arc(238, 200, 8, 0 , du(360))
			cxt.fillStyle = 'black';
			cxt.fill();
			cxt.arc(312, 200, 8, 0 , du(360))
			cxt.fill()
			cxt.closePath();
			
			//鼻子
			cxt.beginPath();
			cxt.arc(275, 250, 10, 0 , du(360))
			cxt.fillStyle = 'black';
			cxt.fill()
			cxt.closePath();
			
			function face1() {
				//笑
					cxt.beginPath();
					cxt.arc(275, 250, 50 , du(30), du(150))
					cxt.lineWidth = 8;
					cxt.stroke()
					cxt.closePath();
			}
			
			function face2() {
				//委屈
					cxt.beginPath();
					cxt.arc(275, 330, 50 , du(-30), du(-150), true)
					cxt.lineWidth = 8;
					cxt.stroke()
					cxt.closePath();
			}
			
			function face3() {
				//ω笑
					cxt.beginPath();
					cxt.arc(255, 280, 20 , 0, du(180))
					cxt.lineWidth = 8;
					cxt.stroke()
					cxt.closePath();
					cxt.beginPath();
					cxt.arc(295, 280, 20 , 0, du(180))
					cxt.lineWidth = 8;
					cxt.stroke()
					cxt.closePath();
			}
			var i = 0
			setInterval(function() {
				
				cxt.beginPath();
				cxt.fillStyle = 'white';
				cxt.fillRect(220,270,110,40)
				cxt.closePath();
				switch(i % 3){
					case 0:
						face1();
						break;
					case 1:
						face2();
						break;
					default:
						face3()
				}
				i++
			},1000);
		</script>
	</body>
</html>
